<template>
  <view class="container">
    <!-- 标题 -->
    <view class="header">
      <text class="header-text">充值列表</text>
    </view>

    <!-- 列表项 -->
    <view class="list">
      <view class="list-item" v-for="(item, index) in list" :key="index">
        <view class="list-item-content">
          <!-- 创建时间 -->
          <view class="list-item-row">
            <text class="list-item-title">创建时间：</text>
            <text class="list-item-info">{{ item.createTime }}</text>
          </view>
          <!-- 订单编号 -->
          <view class="list-item-row">
            <text class="list-item-title">订单编号：</text>
            <text class="list-item-info">{{ item.inOrderPayNo }}</text>
          </view>
          <!-- 充值金额 -->
          <view class="list-item-row">
            <text class="list-item-title">充值金额：</text>
            <text class="list-item-money">{{ item.inMoney / 100 }} 元</text>
          </view>

          <!-- 退款按钮 -->
          <view class="refund-button-container">
            <button class="refund-button" @click="handleRefund(item)">退款</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { useUserStore } from '@/store'
import { storeToRefs } from 'pinia'
import { pageCardIn, refund } from '@/service/card/card' 
const {
  loading: pageCardInLoading,
  error: pageCardInError,
  data: pageCardInData,
  run: pageCardInRun,
} = useRequest(() => pageCardIn(formdata.value))

const {
  loading: refundLoading,
  error: prefundError,
  data: refundData,
  run: refundRun,
} = useRequest(() => refund(refunData.value))

const list = ref([])

const { userInfo } = storeToRefs(useUserStore())
// const userInfo = uni.getStorageSync('userInfo')

const formdata = ref({})

const refunData = ref({})

onLoad((query) => {
  formdata.value = {
    usrId: userInfo.value.id,
    current: 1,
    size: 10,
    cardId: query.cardID,
  }
  pageCardInRun().then((res) => {
    list.value = res.list
  })
  //   $http.post({
  //     url: '/sportCardApi/card/ocCard/pageCardIn',
  //     data: {
  //       usrId: userInfo.id,
  //       current: 1,
  //       size: 10,
  //       cardId: query.cardID,
  //     },
  //     success: (res) => {
  //       console.log('数据获取成功')
  //       console.log(res)
  //       list.value = res.list
  //     },
  //     fail: (err) => {
  //       console.log('请求失败', err)
  //     },
  //   })
})

// 退款操作
const handleRefund = (item) => {
  console.log(`开始退款操作：订单编号 ${item.inOrderPayNo}`)
  refunData.value.inOrderPayNo = item.inOrderPayNo
  refundRun(refunData.value).then((res) => {
    console.log(res)
  })
  // 可以在这里调用退款接口，例如：
  //   $http.post({
  //     url: `/sportCardApi/pay/refund/${item.inOrderPayNo}`,
  //     success: (res) => {
  //       console.log('退款成功', res)
  //       // 在退款成功后做相应的操作，比如刷新列表或者显示提示信息
  //     },
  //     fail: (err) => {
  //       console.log('退款失败', err)
  //     },
  //   })
}
</script>

<style scoped>
.container {
  /* padding: 40rpx !important; */
  width: 94%;
  padding-left: 3%;
  background-color: #f5f5f5;
}

.header {
  padding: 12px;
  margin-bottom: 20px;
  background-color: #ff6347;
  border-radius: 8px;
}

.header-text {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  text-align: center;
}

.list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.list-item {
  display: flex;
  flex-direction: column;
  padding: 15px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.list-item-content {
  display: flex;
  flex-direction: column;
}

.list-item-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.list-item-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.list-item-info {
  font-size: 14px;
  color: #555;
}

.list-item-money {
  font-size: 16px;
  font-weight: bold;
  color: #ff6347;
}

.refund-button-container {
  padding-left: 76%;
  margin-top: 15px;
  text-align: end;
  /* display: flex;
  justify-content: flex-end;
  align-items: center; */
}

.refund-button {
  width: 150rpx;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  background-color: #ff6347;
  border: none;
  /* padding: 10px 20px; */
  border-radius: 5px;
}

.refund-button:hover {
  background-color: #e5533b;
}
</style>
